<!--
 * @Author: songleiluo 361215740@qq.com
 * @Date: 2024-01-07 12:04:56
 * @LastEditors: songleiluo 361215740@qq.com
 * @LastEditTime: 2024-01-28 14:02:44
 * @FilePath: \dxhospital\src\pages\patient\patient.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="personal-information-container">
        <div class="personal-information-evaluation-title">个人信息评估</div>
        <div class="personal-information-collapse">
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="基本信息" name="1" class="el-collapse-item">
                    <BasicInfo/>
                </el-collapse-item>
                <el-collapse-item title="病史资料" name="2" class="el-collapse-item">
                    <MedicalHistory/>
                </el-collapse-item>
            </el-collapse>

        </div>
        <div class="patient-form-bottom">
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup >
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import BasicInfo from './basicInfo.vue';
import MedicalHistory from './medicalHistory.vue';

const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
    console.log(val)
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped lang='scss'>
.personal-information-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.personal-information-evaluation-title {
    font-size: 16px;
    font-weight: 600;
}

.personal-information-collapse {
    padding: 10px 0px;
}

.patient-form-container {
    width: 100%;
    display: flex;
    flex-direction: row;

    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;

    .patient-form-container-item {
        width: 25%;
    }
}

.patient-form-bottom {
    position: fixed;
    left: 220px;
    bottom: 15px;
}

.el-collapse-item{
   ::v-deep{
    .el-collapse-item__header{
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    }
}
</style>